<template>
  <el-container style="height: 100%;" class="dealBaseHome">
    <el-header v-loading="loading" class="app-header">
      <div class="titlebar">
        <div class="titlebar-title">
          <div class="title">
            <div class="tit">
              <el-tooltip placement="bottom">
                <div slot="content">{{ lpName }}</div>
                <el-button class="tipText" type="text">
                  <p style="width:100%;"> {{ lpName }}</p>
                </el-button>
              </el-tooltip>
            </div>
            <div class="tab-change" style="flex: 1;justify-content: flex-end;">
              <Internationalization v-show="lpName === '国际化'" />
            </div>
          </div>
        </div>
      </div>
    </el-header>

    <el-container class="page-component__scroll">
      <el-main class="app-body el-scrollbar__wrap">
        <el-aside class="fundMenu">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleSelect"
          >
            <template v-for="(item) in childLeftMenu">
              <el-menu-item :key="item.id" :index="item.id">
                <span slot="title">{{ $t(item.menuName) }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <div v-loading="loading" class="voteMain">
          <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
          <component :is="menuPath" ref="menuPath" :parameter="parameter" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import merge from 'webpack-merge'
  import { getHrBase } from '@/api/oa/hr/hrBase'
  import { childMenuList } from '@/api/system/menu'
  import { getAsyncComponent } from '@/utils'

  export default {
    filters: {
      ellipsis(value) {
        if (!value) {
          return ''
        }
        if (value.length > 20) {
          return value.slice(0, 20) + '...'
        }
        return value
      }
    },
    data() {
      return {
        loading: false,
        busId: this.$route.query.hrId,
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '修改logo',
        // name
        lpName: this.$route.query.name,
        // 公司ID
        hrId: this.$route.query.hrId,
        // 表单参数
        form: {},
        childLeftMenu: [],
        // 组件地址
        menuPath: '',
        activeIndex: '',
        parameter: {}

      }
    },
    created() {
      this.getHrBaseInfo()
      this.listLoad()
    },
    mounted() {
      this.listComponent()
    },
    methods: {
      load() {
        if (this.$refs.menuPath?.init !== undefined) {
          const data = { id: this.busId, busType: 'manager' }
          this.$refs.menuPath.init(data)
        }
      },
      // 获取地址
      handleSelect(key) {
        const index = this.childLeftMenu.findIndex(children => children.id === key)
        const menuPath = this.childLeftMenu[index].component
        if (menuPath != null) {
          this.importFormPath(menuPath)
          this.load()
        } else {
          const error = 'error/404'
          this.importFormPath(error)
        }
      },
      // 初始化数据
      getHrBaseInfo() {
        if (this.hrId !== null && this.hrId !== undefined) {
          getHrBase(this.hrId).then(response => {
            this.lpName = document.title = response.data.name
          })
        }
      },
      // 引入组件
      importFormPath(menuPath) {
        this.showHome = false
        const newPath = menuPath.lastIndexOf('\/')
        var strPath = ''

        if (menuPath.indexOf('?') === -1) { // 不含问号
          strPath = menuPath.substring(newPath + 1, menuPath.length)
          this.menuPath = getAsyncComponent('@/views/' + menuPath)
          this.parameter = {}
        } else {
          const index = menuPath.lastIndexOf('?')
          const sMenuPath = menuPath.substring(0, index)
          this.menuPath = getAsyncComponent('@/views/' + sMenuPath)

          strPath = sMenuPath.substring(sMenuPath.lastIndexOf('\/') + 1, sMenuPath.length)
          // 增加参数
          const newKey = menuPath.split('?')[1]
          var newstr = newKey.replace(/=/g, '":"')
          const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
          this.parameter = JSON.parse(objectKey)
        }
        this.$router.push({ // 地址栏添加左侧菜单地址
          query: merge(this.$route.query, { 'menuPath': strPath })
        })
      },
      listComponent() {
        this.$bus.$on('async_done', () => {
          this.load()
        })
      },
      listLoad() {
        // 菜单列表
        childMenuList('hr_base_info').then(response => {
          this.childLeftMenu = response.rows
          this.activeIndex = this.childLeftMenu[0].id
          var menuPath = response.rows[0].component
          if (menuPath) {
            this.importFormPath(menuPath)
            this.load()
          } else {
            var error = 'error/404'
            this.importFormPath(error)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .voteMain {
    margin-left: 200px;
  }
</style>
